<template>
  <div class="billList">
    <nav_bar title='订单详情' background='#fff' :back="true"  @back="handlerGobackClick"></nav_bar>
    <div class="newBill" @click="showPopup($event)">新建抬头</div>
    <div 
      class="list"
      v-for="(item,index) of billList"
      :key='index'
    >
      <div class="item">
        <div class="item_name">公司名称：</div>
        <div class="item_content">{{item.company_name}}</div>
      </div>
      <div class="item">
        <div class="item_name">发票税号：</div>
        <div class="item_content">{{item.Invoice_tax_number}}</div>
      </div>
      <div class="btn_list">
        <div class="del" @click="delBill(item.id)">删除</div>
        <div class="editor" @click="showPopup($event,item)">编辑</div>
      </div>
    </div>

    <!-- 弹出框 -->
    <van-popup
      :show="showPopupFlag"
      position="center"
      :overlay="true"
      @close="closePopup"
    >
      <div class="popup_content">
        <div class="list">
        <div class="item">
          <div class="item_name">公司名称：</div>
          <input type="text" placeholder="请输入公司名称" v-model="company_name">
        </div>
        <div class="item">
          <div class="item_name">发票税号：</div>
          <input type="text" placeholder="请输入发票税号" v-model="company_checknumber">
        </div>
        <div class="item">
          <div class="item_name">邮箱地址：</div>
          <input type="text" placeholder="请输入邮箱地址" v-model="company_email">
        </div>
        <div class="popup_btn_list">
          <div class="del" @click="closePopup">取消</div>
          <div class="editor" @click="setBill">保存</div>
        </div>
      </div>
    </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  name:'billList',
  data() {
    return {
      id:'',//抬头的id
      billList:'',
      showPopupFlag:'',
      company_name:'',
      company_checknumber:'',
      company_email:''
    }
  },
  methods: {
    handlerGobackClick(){
      wx.navigateBack({
      delta: 1
    })
    },
    showPopup($event,item){
      if(item){
        this.id=item.id;
        this.company_name=item.company_name;
        this.company_checknumber=item.Invoice_tax_number;
        this.company_email=item.email_address;
      }else{
        this.id='';
        this.company_name='';
        this.company_checknumber='';
        this.company_email='';
      }
      this.showPopupFlag=true
    },
    closePopup(){
      this.showPopupFlag=false
    },
    async delBill(id){
      //删除抬头
      const answer=await this.$currency.showModal('确认删除抬头?','','');
      if(answer){
       const userToken=wx.getStorageSync('userToken');
       const res=await this.$request.postData('/ucenter/delInvoiceLookUp',{
         user_token:userToken,
         invoice_look_up_id:id
       })
       if(res.data.level=='success'){
         this.getBill()
       }
       this.$currency.showToast(res.data.message) ;
      }
    },
    async setBill(){
      //设置抬头
      var userToken=wx.getStorageSync('userToken');
      const res=await this.$request.postData('/ucenter/setInvoiceLookUp',{
        user_token:userToken,
        company_name:this.company_name,
        invoice_tax_number:this.company_checknumber,
        email_address:this.company_email,
        id:this.id
      })
      if(res.data.level=='success'){
        this.closePopup();
        this.getBill()
      }
      this.$currency.showToast(res.data.message)
    },
    async getBill(){
      //获取抬头列
      var userToken=wx.getStorageSync('userToken');
      const res=await this.$request.getData('/ucenter/getInvoiceLookUpList',{
        user_token:userToken
      })
      if(res.data.level=='success'){
        this.billList=res.data.data
      }
    }
  },
  onLoad(options){
    this.getBill()

  }
}
</script>
<style lang="scss" scoped>
  .billList{
    padding:10px;
  }
  .newBill{
    padding:10px 0;
    font-weight: 600;
    border-radius: 5px;
    color:#fff;
    text-align: center;
    background: #23b6ac;
    margin-bottom: 30px;
  }
  .list{
    border-bottom:1px solid #eee;
    .item{
      display: flex;
      align-items: center;
      margin:10px 0;
    }
  }
  .btn_list{
    margin-top:20px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row-reverse;
    &>div{
      border-radius: 10px;
      padding:5px 30px;
      background: #23b6ac;
      color:#fff;
      margin:0 20px;
    }
    .del{
      background: gray;
    }
  }

  //弹出框
  .popup_content{
    width: calc(100vw - 30px);
    .item{
      padding:20px 10px;
    }
    .popup_btn_list{
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 20px;
      &>div{
        border-radius: 20px;
        padding:10px 40px;
        background: #23b6ac;
        color:#fff;
        margin:0 20px;
      }
      .del{
        background: gray;
      }
    }
  }
</style>
